<template>
	<view class="content">
		<!-- 	<view style="position: absolute;right: 0;z-index: 200;top:0;">
			<image src="https://media.istockphoto.com/photos/sun-picture-id494208277?b=1&k=6&m=494208277&s=170667a&w=0&h=gSSlPWtQFTAN8nuFmZGOJ6k6bkPUIsNT3PM9ryWT0Fs=" mode=""></image>
		</view> -->
		<!-- 弹出层 -->
		<u-popup v-model="show">
			<view class="popBox">
				<view class="title">
					更多
				</view>
				<view class="popList">
					<!-- <view><view class="icon iconfont icon-xinxi"></view></view> -->
				</view>
			</view>
		</u-popup>
		<!-- 弹出层按钮 -->
		<view class="popupBtn flex-ac" @click="showPopup">
			<view>
				<image src="../../static/icon/list.png" mode=""></image>
			</view>
			<view class="morning">早上好，</view>
		</view>
		<!-- 顶部信息 -->
		<view class="info flex-dc-jc">
			<view class="flex-ac location">
				<view class="icon iconfont icon-dibiao"></view>
				<view>湖南</view>
				<view class="time">
					{{ time }}
				</view>
			</view>
			<view class="flex-ac">
				<view class="week flex-jc-ac">
					<view>{{week}}</view>
					<view>{{weather.cond_txt}}</view>
					<view>{{weather.wind_dir}}</view>
					<view>{{weather.tmp}}℃</view>
				</view>
			</view>
			<view class="flex-ac">
				<view>未来2天降雨概率 60%</view>
			</view>
		</view>

		<view class="myFarm">
			<view class="title">
				我的农场
			</view>
			<view>
				<u-grid :col="2">
					<block v-for="(item,index) in farmList">
						<u-grid-item @click="toFarmInfo(index)">
							<view class="boxItem flex-dc-jc-ac">
								<view class="image">
									<image :src="item.farmImg" mode=""></image>
								</view>
								<view class="titleBox">
									<view class="title">{{item.farmName}}</view>
									<view class="discribe">
										作物类型：{{item.nzwType}}
									</view>
								</view>
							</view>
						</u-grid-item>
					</block>
					<u-grid-item @click="toNew">
						<view class="boxItem flex-dc-jc-ac">
							<view class="image">
								<image src="../../static/icon/add.png" mode=""></image>
							</view>
							<view class="titleBox">
								<view class="title">新增农田</view>
								<view class="discribe">
									录入农田信息
								</view>
							</view>
						</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
	</view>
</template>

<script>
	import {getFarmList} from "@/common/api/water.js"
	import {getWeather} from "@/common/api/weather.js"
	import {getUser} from "@/common/entity/user.js"
	import {cropList} from "@/common/entity/dataset.js"
	import {setFarm} from "@/common/entity/farm.js"
	export default {
		data() {
			return {
				title: 'Hello',
				show: false,
				time: this.$u.timeFormat(new Date(), 'yyyy年mm月dd日 hh:MM:ss'),
				week: '星期一',
				weather:{},
				farmList:[
					{
						farmImg:'../../static/element/2.png',
						farmName:'广西北海农场',
						nzwType:'西瓜'
					},
					{
						farmImg:'../../static/element/4.png',
						farmName:'云南大理酒店',
						nzwType:'葡萄'
					},
					{
						farmImg:'../../static/element/1.png',
						farmName:'广西桂林农场',
						nzwType:'猕猴桃'
					}
				]
			}
		},
		onLoad() {
			setInterval(() => {
				this.time = this.$u.timeFormat(new Date(), 'yyyy年mm月dd日 hh:MM:ss')
			}, 1000)
			
			// 获取到缓存中的经纬度来查询天气
			let location = localStorage.getItem("location")
			getWeather(location).then(res=>{
				this.weather = res[1].data.HeWeather6[0].now
				console.log(this.weather)
			})

			let day = (new Date()).getDay();
			let weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
			this.week = weeks[day];
			getFarmList().then(res=>{
				let rs = res[1].data.data.results
				this.farmList = []
				let farm = []
				let id = getUser().id
				for(let i=0;i<rs.length;i++){
					if(rs[i].soilbelong == id){
						this.farmList.push({
							farmImg:"https://crop.lxylw.design"+rs[i].soilphotourl,
							farmName:rs[i].soilname,
							nzwType:cropList[rs[i].crop-1].label
						})
						farm.push(rs[i])
					}
				}
				setFarm(farm)
			})
		},
		mounted() {

		},
		onPullDownRefresh() {
			getFarmList().then(res=>{
				let rs = res[1].data.data.results
				this.farmList = []
				let farm = []
				let id = getUser().id
				for(let i=0;i<rs.length;i++){
					if(rs[i].soilbelong == id){
						this.farmList.push({
							farmImg:"https://crop.lxylw.design"+rs[i].soilphotourl,
							farmName:rs[i].soilname,
							nzwType:cropList[rs[i].crop-1].label
						})
						farm.push(rs[i])
					}
				}
				setFarm(farm)
				this.$u.toast("数据加载成功")
				uni.stopPullDownRefresh();
			})
		},
		methods: {
			showPopup() {
				uni.showToast({
					title: '暂未开放,敬请期待',
					icon: 'none',
					duration: 2000
				});
			},
			toFarmInfo(index) {
				uni.navigateTo({
					url: "../farmlandInfo/farmlandInfo?index="+index
				})
			},
			toNew() {
				uni.navigateTo({
					url: '../farmAdd/farmAdd'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.popBox {
		padding: 20rpx 40rpx;
		width: 45vw;

		.title {
			font-size: 42rpx;
			// font-weight: bold;
		}
	}

	.popupBtn {
		position: absolute;
		left: 20rpx;
		top: 20rpx;
		color: #777941;

		.icon-fenleiorguangchangorqita {
			font-size: 36rpx;
			margin-right: 20rpx;
		}

		image {
			height: 36rpx;
			width: 36rpx;
			margin-right: 20rpx;
		}

		.morning {
			height: 36rpx;
			line-height: 36rpx;
			font-weight: 600;
		}

	}

	.info {
		color: #777941;
		font-weight: 600;

		view {
			margin-top: 12rpx;
		}

		.location {
			color: #777941;
			font-size: 42rpx;
			margin-left: -40rpx;
		}

		.time {
			padding-top: 18rpx;
			font-size: 32rpx;
			margin-left: 20rpx;
		}

		.icon-dibiao {
			font-size: 38rpx;
			margin-right: 8rpx;
		}

		.week {
			view {
				margin-right: 20rpx;
			}
		}

		box-sizing: border-box;
		padding: 80rpx;
		min-height: 320rpx;
		width: 100%;
		// background-image: url('https://img-u-1.51miz.com/preview/element/00/01/12/29/E-1122962-985A8694.jpg!/quality/90/unsharp/true/compress/true/format/jpg/fh/320');
		background-image: url('../../static/bgimg/14.png');
		font-size: 36rpx;
		box-shadow: 2rpx 2rpx 20rpx 5rpx #ccc;
		background-size:cover;
		border-radius: 0 0 16rpx 16rpx;
	}

	.myFarm {
		width: 90%;
		margin-top: 36rpx;

		.boxItem {
			height: 320rpx;
			width: 38vw;
			box-shadow: 0rpx 2rpx 10rpx 0rpx #ccc;
			border-radius: 16rpx;

			.image {
				height: 36%;
				width: 16vw;
				overflow: hidden;

				image {
					height: 100%;
					width: 100%;
					border-radius: 50%;
				}
			}

			.title {
				margin-top: 20%;
				font-size: 28rpx;
				text-align: center;

			}

			.discribe {
				font-size: 24rpx;
				text-align: center;
				color: #C5C5C5;
			}
		}
	}
</style>
